<template>
  <a-drawer
    :closable='true'
    placement='right'
    width='100%'
    :visible='visable'
    @close="$emit('close', false)">
    <a-spin style='height: 100%' :spinning='loading' v-if='loading'>
      <div></div>
    </a-spin>
    <div class='design-main' v-if='!loading'>
      <iframe :src='design_url'></iframe>
    </div>
  </a-drawer>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    visable: {
      type: Boolean,
      default: false
    },
    moduleId: {
      type: [String, Number],
      default: '01'
    },
    planId: {
      type: [String, Number],
      default: ''
    },
    pageName: {
      type: [String],
      default: ''
    }
  },
  watch: {
    visable(val) {
      if (val) {
        this.loading = false
      }
    },
    planId(){
      this.reShow()
    },
    moduleId() {
      this.reShow()
    },
    pageName() {
      this.reShow()
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token
    })
  },
  created() {

  },
  data() {
    return {
      design_url: '',
      loading: true
    }
  },
  methods: {
    reShow(){
      this.loading = true
      this.$nextTick(()=>{
        this.loading = false
        this.design_url = window.PROJECT_CONFIG.VUE_APP_DESIGN_PROJECT_URL + `?moduleId=${this.moduleId}&planId=${this.planId}&token=${this.token}&pageName=${this.pageName}`
      })
    },
  },
  mounted() {
    this.reShow()
  }
}
</script>

<style lang='less' scoped>
/deep/ .ant-drawer-body {
  height: 100%;
  padding: 0px;
}

.design-main {
  width: 100%;
  height: 100%;

  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>